  <!-- 商品编辑页面-->
<template>
  <!-- direction="vertical" 设置元素的垂直方向布局 -->
  <el-container direction="vertical" style scoped>
     <el-row style="width:100%;background-color:#B7CEE5">
        <el-col :span="1"><img src="../assets/images/NO1.jpg" alt="" style="margin:30px 30px;width:70px;height:70px"></el-col>
        <el-col :span="19"><h2 style="color:#4F7298;font-family:cursive;font-size:30px;margin:50px 30px">雅黛美妆海外免税购管理员系统</h2></el-col>
          <el-col :span="4" style="margin-top:100px">
          <el-breadcrumb separator-class="el-icon-arrow-right"> <!-- :to动态指定导航的路径或对象 -->
            <el-breadcrumb-item :to="{ path: '/admin' }">首页 </el-breadcrumb-item> 
          </el-breadcrumb>
        </el-col>
    </el-row>
   
     <el-row style="width:100%">
        <!-- 侧边栏 -->
    <el-col style="width:10%;height:100%;" class="tac">
     <el-menu
      default-active="1" style="height:1100px"
      class="el-menu-vertical-demo"
      background-color="#7BA6D0"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">
          <i class="el-icon-location"></i>
          <span  slot="title">订单发货管理</span> 
      </el-menu-item>  
    </el-menu>
    </el-col>

     <el-col style="width:90%;height:100%;">
        <el-row style="width:100%;height:10%;background-color:#545c64;color:#fff;text-align:center;line-height:60px">
           <span style="margin:auto">订单发货管理</span>
        </el-row>
        <el-row style="width:100%;height:1000px;background-color:#F1F8FA">
           <el-col style="margin-top:10px;width:45%;height:100%;background-color:#F1F8FA;margin:10px 20px">
            <h3>收货人信息</h3>
           <table style="width:101%;"  border="0" cellpadding="20" cellspacing="2" bgcolor="#BBD3EB">
                 <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">订单号</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入商品编号" name="ordernum"  v-model="formdata.ordernum" disabled>
                  </td>
                </tr> <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">买家</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入商品价格" name="nickname"  v-model="formdata.nickname" disabled>
                  </td>
                </tr> <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">商品信息</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入商品库存" name="goods_names"  v-model="formdata.goods_names" disabled>
                  </td>
                </tr> <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">订单总价</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入商品分类cid" name="ordertotal"  v-model="formdata.ordertotal" disabled>
                  </td>
                </tr>
                <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">下单时间</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入商品分类cid" name="ordertime"  v-model="formdata.ordertime" disabled>
                  </td>
                </tr>
                <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">收货人</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入商品分类cid" name="name"  v-model="formdata.name" disabled>
                  </td>
                </tr>
                 <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">收货电话</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入商品分类cid" name="phone"  v-model="formdata.phone" disabled>
                  </td>
                </tr>
                 <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">收货地址</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入商品分类cid" name="address"  v-model="formdata.address" disabled>
                  </td>
                </tr>     
        </table>
        </el-col>   
       <el-col style="width:45%;height:100%;background-color:#F1F8FA;margin:10px 50px">
         <h3>发货人信息</h3>
        <table style="width:101%;"  border="0" cellpadding="20" cellspacing="2" bgcolor="#BBD3EB">
               <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">发货人</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入发货人" name="phone" value="中国免税上海总仓">
                  </td>
                </tr>
                 <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">发货电话</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入发货电话" name="phone" value="1001023">
                  </td>
                </tr>
                 <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">发货地址</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入发货地址" name="address" value="上海市浦东新区高科技园路88号">
                  </td>
                </tr>
                   <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">邮政编码</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入邮政编码" name="mail2" value="201203">
                  </td>
                </tr>
                   <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">仓库编号</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入仓库编号" name="store2" value="SZ-001">
                  </td>
                </tr>
                 <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">运输方式</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入运输方式" name="courier" value="快递（顺丰）">
                  </td>
                </tr>
                 <tr>
                  <td style="width:20%;background-color:#E9F7FD;text-align:center">发货日期</td>
                  <td style="width:80%">
                    <input type="text" placeholder="请输入发货日期" name="courier" v-model="deliveryDate">
                  </td>
                </tr>
                 <tr>
                <td height="30" align="center" bgcolor="#FFFFFF" colspan="2">
                  <input type="button" value="确认发货" @click="ConfirmShipment" />
                </td>
              </tr>
               
        </table>
      </el-col>    

      </el-row>
    </el-col>    
  </el-row>

  </el-container>
</template>
<script>
export default {
  data() {
    return {
      formdata: { //定义formdata对象
         ordernum: "",
          nickname: "",
           goods_names: "",
            ordertotal: "",
           ordertime: "",
           name:"",
           phone:"",
           address:"",
           orderid:""
      },
       deliveryDate: '', //发货日期
    };
  },
   mounted() { //实例被挂载到DOM后调用。此时组件已经被渲染并插入到页面中
    this.deliveryDate = this.getCurrentDate();
  },
   methods: {
    // 获取当前日期并格式化
      getCurrentDate() {
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 因为月份从0开始故+1；
      // padStart（）在当前字符串的开头填充指定的字符，直到达到指定的长度。（结果字符最小长度，填充的字符）
      const day = String(currentDate.getDate()).padStart(2, '0'); // 保证是两位数
      return `${year}-${month}-${day}`; // 格式化为 YYYY-MM-DD 模板字符串  ${} 嵌入表达式
    
    },
    ConfirmShipment(){ //确认发货
    let orderid=this.formdata.orderid;
       this.axios.post('/api/admin/ConfirmShipment',{ orderid: orderid })   .then(res => { //处理异步操作成功时的回调函数
                alert(res.data.message);
                this.$router.push({ path: '/admin', query: { selectedMenu: '3' } });
            })
            .catch(err => {
                alert(err.message);
            });
    }
  },
    created(){
      // 添加一个判断条件，确保this.$route.params存在并且包含该条商品信息(路由参数)。如果不存在就给this.formdata赋予一个默认值
        if (this.$route.params && this.$route.params.shipments) { 
            this.formdata = this.$route.params.shipments;
        } else {
          this.formdata = { 
          ordernum: "",
          nickname: "",
           goods_names: "",
            ordertotal: "",
           ordertime: "",
           name:"",
            phone:"",
           address:"",
            orderid:""
        };
      }
    }
};
</script>
<style>
table td{
  background-color: #FFFFFF;
}
table input{
  width: 600px;
  height: 30px;
}
h3{
  font-family:Serif;
  text-align: center;
}
</style>
